<template id="PersonTable">
  <div class="PersonTable">
    <PersonnelCom />
    <el-divider></el-divider>
    <publicInput
      class="publicinput"
      :titleName="'企业名称'"
      :option="options"
      @changeId="companyPersonnelid"
    />
    <Personactive class="Personactive" :lineData="lineData" v-if="lineData.length" />
    <companypersonnelNew :list="barData" v-if="barData.length" />
    <!-- <div class="bottomContainer">
      <Companypersonnel
        :companyuserData="companyuserData"
        v-if="companyuserData.length"
      />
      <div style="width:50%;">
        <publicInput
          class="publicinput"
          :option="options"
          :titleName="'企业名称'"
          @changeId="companyPersonnelid"
        />
        <Companypersonnelpie
          :offiandtempuser="offiandtempuser"
          v-if="offiandtempuser.length"
        />
      </div>
    </div> -->
    <div style="height: 13vh; overflow: hidden; margin-top: 1.5vw">
      <livepergorout
        style="height: 9vh"
        :list="userinandoutlist"
        :topData="topData"
        :loadstatus="false"
        :title="'实时人员进出数据墙'"
        @loadingMore="loadingmore"
      />
    </div>
    <div class="intoPersonnel">
      <div style="width: 50%">
        <p class="titlePer" style="padding: 0.5vw 0 0.5vw 0; font-size: 23px">
          流入人员构成
        </p>
        <!-- 省份 -->
        <provincesinto
          style="height: 7vw"
          :visituserbyarea="visituserbyarea"
          v-if="visituserbyarea.length"
          :title="'流入人员构成'"
        />
      </div>
      <div style="width: 50%">
        <publicInput
          class="publicinput"
          :titleName="'筛选'"
          :option="options"
          :valueInputname="valueInputname"
          :valueInput="valueInput"
          style="padding-top: 0.5vw"
          v-if="valueInputname"
          @changeId="companyPersonnelids"
        />
        <div style="position: relative; top: 2.6vh; height: 7vw">
          <!-- 企业名 -->
          <provincesinto
            :visituserbyarea="visituserbycompany"
            v-if="visituserbycompany.length"
            :title="'流入人员构成'"
          />
        </div>
      </div>
    </div>
    <div style="  overflow: hidden; padding-top: 0.3vw" class="fangbox">
      <livepergorout
        style="height: 11vh"
        :list="visituserlist"
        :topData="topData2"
        :title="'访问企业人员管理'"
        @loadingMore="loadingmore"
      />
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import PaddingCom from "components/paddingCom";
import PersonnelCom from "components/personnelCom";
import Personactive from "components/echarts/personActive";
import Companypersonnel from "components/echarts/Companypersonnel";
import Companypersonnelpie from "components/echarts/Companypersonnelpie";
import companypersonnelNew from "components/echarts/companypersonnel-new";
import livepergorout from "components/listable/livepergorout";
import provincesinto from "components/echarts/provincesInto";
import publicInput from "components/publicInput";
import FOURCONCOR from "components/fourCorner";
import { userinandout } from "api/zdh";
import { companyuser } from "api/zdh";
import { offiandtempuser } from "api/zdh";
import { companylist } from "api/zdh";
import { userinandoutlist } from "api/zdh";
import { visituserlist } from "api/zdh";
import { visituserbyarea } from "api/zdh";
import { visituserbycompany } from "api/zdh";
import { userinandoutbyhour } from "api/zdh";
export default {
  name: "PersonTable",
  components: {
    PaddingCom,
    PersonnelCom,
    Personactive,
    Companypersonnel,
    companypersonnelNew,
    publicInput,
    livepergorout,
    provincesinto,
    Companypersonnelpie,
    FOURCONCOR,
  },
  // 定义属性
  data() {
    return {
      lineData: [],
      barData: [],
      companyuserData: [],
      offiandtempuser: [],
      companylist: [],
      userinandoutlist: [],
      visituserlist: [],
      visituserbyarea: [],
      visituserbycompany: [],
      topData: [
        {
          name: "时间",
          deindex: "create_time",
          callBack: function (n) {
            return n.create_time.substring(11);
          },
        },
        {
          name: "姓名",
          deindex: "name",
        },
        {
          name: "企业",
          deindex: "enterprise_name",
        },
        {
          name: "进出状态",
          deindex: "status",
          callBack: function (n) {
            return n.status ? "进" : "出";
          },
        },
      ],
      topData2: [
        {
          name: "访问时间",
          deindex: "start_time",
          callBack: function (n) {
            return n.start_time.substring(11);
          },
        },
        {
          name: "来访人姓名",
          deindex: "name",
        },
        {
          name: "性别",
          deindex: "sex",
          callBack: function (n) {
            return n.sex ? "男" : "女";
          },
        },
        {
          name: "来访企业",
          deindex: "company_name",
        },
        {
          name: "审批状态",
          deindex: "audit_status",
          callBack: function (n) {
            if (n.audit_status == 0) {
              return "待审核";
            } else if (n.audit_status == 1) {
              return "审核通过";
            } else if (n.audit_status == 2) {
              return "审核不通过";
            } else {
              return "通勤无效";
            }
          },
        },
      ],
      titileDate: [
        {
          name: "序号",
          deindex: "id",
          callBack: function (n, i) {
            return i + 1;
          },
        },
        {
          name: "企业名称",
          deindex: "name",
        },
        {
          name: "进出车辆总数",
          deindex: "value",
        },
      ],
      options: [
        {
          value: "选项12",
          label: "黄金糕23",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      valueInput: 1,
      valueInputname: "",
      optionss: [],
      page: 1,
      pageSize: 5,
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    loadingmore() {
      this.page += 1;
      this.getVisituserlist();
    },
    companyPersonnelid(value) {
      this.getUserinandout(value);
      this.getUserinandoutbyhour(value);
    },
    companyPersonnelids(value) {
      this.getVisituserbycompany(value);
    },
    // text(value){
    //   this.getOffiandtempuser(value)
    // },
    // 获取人员进出统计echars折线图数据
    async getUserinandout(value) {
      this.lineData = [];
      if (!value) {
        let res = await userinandout();
        if (this.$iscode(res)) {
          const { data } = res;
          this.lineData.push(data);
        }
      } else {
        let res = await userinandout({
          enterprise_id: value,
        });
        if (this.$iscode(res)) {
          const { data } = res;
          this.lineData.push(data);
        }
      }
    },
    // 获取人员分布统计echars柱状图数据
    async getUserinandoutbyhour(value) {
      this.barData = [];
      if (!value) {
        let res = await userinandoutbyhour();
        if (this.$iscode(res)) {
          const { data } = res;
          this.barData.push(data);
        }
      } else {
        let res = await userinandoutbyhour({
          enterprise_id: value,
        });
        if (this.$iscode(res)) {
          const { data } = res;
          this.barData.push(data);
        }
      }
    },
    //获取公司人员分布统计柱状图
    async getCompanyuser() {
      this.companyuserData = [];
      let res = await companyuser();
      if (this.$iscode(res)) {
        const { data } = res;
        this.companyuserData.push(data);
      }
    },
    //获取公司人员分布统计饼状图
    async getOffiandtempuser(offtempuser) {
      this.offiandtempuser = [];
      let res = await offiandtempuser({
        id: offtempuser,
      });
      if (this.$iscode(res)) {
        const { data } = res;
        this.offiandtempuser.push(data);
      }
    },
    //公司列表作用筛选(饼状图)(雷达图右侧筛选)
    async getCompanylist() {
      this.companylist = [];

      let res = await companylist();
      if (this.$iscode(res)) {
        const {
          data: { list = [] },
        } = res;
        list.length && (this.companylist = this.companylist.concat(list));
        this.options = this.companylist.map((item) => {
          return {
            value: item.id,
            label: item.name,
          };
        });
        this.valueInputname = this.options[0].label;
      }
    },
    //实时人员进出数据墙
    async getUserinandoutlist() {
      this.userinandoutlist = [];
      let res = await userinandoutlist();
      if (this.$iscode(res)) {
        const {
          data: { list = [] },
        } = res;
        list.length && (this.userinandoutlist = this.userinandoutlist.concat(list));
      }
    },
    //访问企业人员管理
    async getVisituserlist() {
      let res = await visituserlist({
        page: this.page,
        pageSize: this.pageSize,
      });
      if (this.$iscode(res)) {
        const {
          data: { list = [] },
        } = res;
        list.length && (this.visituserlist = this.visituserlist.concat(list));
      }
    },
    //流入人员构成
    async getVisituserbyarea() {
      this.visituserbyarea = [];
      let res = await visituserbyarea();
      if (this.$iscode(res)) {
        const {
          data: { list = [] },
        } = res;
        if (!list.length) {
          list.push({});
        }
        list.length && (this.visituserbyarea = this.visituserbyarea.concat(list));
      }
    },
    //流入人员构成企业
    async getVisituserbycompany(id) {
      if (!id) {
        return;
      }
      this.visituserbycompany = [];
      let res = await visituserbycompany({
        enterprise_id: id,
      });
      //console.log("55555555555555", res);
      if (this.$iscode(res)) {
        const {
          data: { list = [] },
        } = res;
        if (!list.length) {
          list.push({});
        }
        list.length && (this.visituserbycompany = this.visituserbycompany.concat(list));
      }
    },
    changeBoxShow() {
      this.$emit("showbox", false);
    },
    //关闭表格
    close() {
      this.$emit(close, false);
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getUserinandout();
    this.getCompanyuser();
    this.getOffiandtempuser();
    this.getCompanylist();
    this.getUserinandoutlist();
    this.getVisituserlist();
    this.getVisituserbyarea();
    this.getVisituserbycompany(this.valueInput);
    this.getUserinandoutbyhour();
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.PersonTable {
  width: 100%;
}
.Personactive {
  margin: 1.55vw 0 1.04vw 0;
}
.bottomContainer {
  display: flex;
  width: 100%;
}
.bottomContainer Companypersonnel {
  width: 50%;
}
.bottomContainer Companypersonnelpie {
  width: 50%;
}
.el-divider--horizontal {
  margin: 0;
}
.el-divider {
  background: #499be7;
}
.publicinput {
  position: absolute;
  right: 0;
  width: 20%;
}
/deep/ .el-select {
  float: right;
}
.intoPersonnel {
  display: flex;
  justify-content: space-between;
}
.titlePer {
  font-size: 0.8vw;
}
.fangbox{
  height:15vh;
}
</style>
